<template>
	<view class="newarticle col ">
		<u--textarea v-model="content" :focus="true" :height="280" placeholder="输入你要发布的文章!" count maxlength='400'
			@input="t">
		</u--textarea>

		<!-- 用于显示用户选中图片 -->
		<view class="upload">
			<image v-for="(item,index) in imgPath" key="index" :src="item"
				style="height: 150rpx;margin-right: 10rpx;border: 0.5rpx solid #a8a8a8;margin-bottom: 10rpx;"
				mode="heightFix" :data-src="item" @click="detele"></image>

			<video v-for="item in videoPath" key="item" :src="item" style="height: 150rpx;width: 280rpx;"
				object-fit="contain" :data-src="item" @click="dv"></video>
		</view>


		<view class="button_cell">
			<view class="cancel" style="text-align: left" @click="back()" hover-class="cb">
				取消
			</view>
			<view class="next op" style="text-align: center" @click="push()" hover-class="nb">
				发布
			</view>
		</view>

		<!-- 底部上传视频或者文件 -->
		<view class="bottom">
			<uni-icons type="image" size="35" class="bi" @click="imageUpload"></uni-icons>
			<uni-icons type="videocam" size="35" class="bi" @click="videoUpload"></uni-icons>
		</view>
	</view>
</template>

<script>
	import request from '@/common/request.js'

	export default {
		onLoad(option) {
			console.log(option);
			this.plantId = option.plantId
			this.img=option.img
			//幂等性
			let min = 1;
			let max = 100000000000;
			this.randomNumInRange = Math.floor(Math.random() * (max - min + 1)) + min;
			console.log(this.randomNumInRange);
		},
		data() {
			return {
				randomNumInRange:0,
				topicId: 0,
				plantId: null, //接受星球id
				myInfo: null, //获取Stroage中的用户信息
				content: '', //内容
				g_id: '',
				a_id: '',
				imgPath: [], //回显图片路径
				img: [],
				videoPath: [], //回显视频路径
			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			//提交的方法
			push() {
				this.img=[]
				var i = 0
				if(this.imgPath==0){
					const post = {
						filePic: '',
						fileVideo: '',
						planetId: this.plantId,
						text: this.content,
						topicId:0,
					}
					request(`/user/release/${this.randomNumInRange}`, post, 'POST').then((res)=>{
						// uni.redirectTo({
						// 	url:'/pages/View/planet/geren?id='+this.plantId + '&image=' + this.img
						// })
						uni.navigateBack()
					})
				}else{
					for (i; i < this.imgPath.length; i++) {
						uni.uploadFile({
							url: 'api/upload/coursefile',
							filePath: this.imgPath[i],
							name: 'filedata',
							success: (res) => {
								var data = JSON.parse(res.data)
								this.img.push(data.path)
								if (this.img.length == this.imgPath.length) {
									const post = {
										filePic: JSON.stringify(this.img),
										fileVideo: '',
										planetId: this.plantId,
										text: this.content,
										topicId:0,
									}
									request('/user/release', post, 'POST').then((res) => {
										console.log(res);
									})
								}
							}
						})
					}
				}
			},
			t(e) {
				this.content = e
			},
			//删除图片使用
			detele(e) {
				var flag = e.currentTarget.dataset.src
				var i
				for (i = 0; i < this.imgPath.length; i++) {
					if (this.imgPath[i] == flag) {
						this.imgPath.splice(i, 1)
					}
				}
			},
			//删除视频使用
			dv(e) {
				var flag = e.currentTarget.dataset.src
				var i
				for (i = 0; i < this.videoPath.length; i++) {
					if (this.videoPath[i] == flag) {
						this.videoPath.splice(i, 1)
					}
				}
			},
			// 图片上传
			imageUpload() {
				uni.chooseImage({
					count: 12, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						var i
						for (i = 0; i < res.tempFilePaths.length; i++) {
							this.imgPath.push(res.tempFilePaths[i])
						}
					}
				})
			},
			// 视频上传
			videoUpload() {
				uni.chooseVideo({
					sourceType: ['camera', 'album'],
					success: (res) => {
						console.log(res);
						var i
						var path = ''
						// 这个接口返回的临时路径是一个一个的字符，需要将这些字符组装城一个完整的临时路径字符串
						for (i = 0; i < res.tempFilePath.length; i++) {
							path = path + res.tempFilePath[i]
						}
						this.videoPath.push(path)
					}
				})
			},


			//图片传入minio

		},

		onShow() {
			this.myInfo = null
			const myInfo = uni.getStorageSync('userInfo')
			this.myInfo = myInfo
		}
	}
</script>

<style scoped>
	.button_cell {
		width: 100%;
		height: 400rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}


	.cancel {
		height: 80rpx;
		width: 200rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 0.5rpx solid #c5c5c5;
		border-radius: 10rpx;
	}

	.cb {
		height: 80rpx;
		width: 200rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 0.5rpx solid #c5c5c5;
		background-color: #c5c5c5;
		border-radius: 10rpx;
	}

	.newarticle {
		width: 100%;
		padding: 20px 16px;
	}

	.green-bnt {
		margin-top: 80px;
		width: 80%;
		height: 50px;
		border-radius: 30px;
		background: #17B99A;
		box-shadow: 0 15px 30px #E7F8F5;
		color: #fff;
		font-family: PingFangSC-Semibold;
		font-size: 15px;
		font-weight: normal;
		line-height: 20px;
		letter-spacing: 0px;
	}

	.next {
		height: 80rpx;
		width: 200rpx;
		background-color: #17B99A;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10rpx;
		border: 0.5rpx solid #b5b5b5;
	}

	.nb {
		height: 80rpx;
		width: 200rpx;
		background-color: #118c73;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10rpx;
		border: 0.5rpx solid #b5b5b5;
	}

	.n-right {
		/* #ifdef MP-WEIXIN */
		transform: translateX(-100px);
		/* #endif */
	}


	/* 这个页面是上传文件的栏 */
	.upload {
		width: 100%;
		margin-top: 80rpx;
		display: flex;
		justify-content: left;
		flex-wrap: wrap;
	}

	.bottom {
		height: 80rpx;
		width: 100%;
		position: fixed;
		bottom: 0rpx;
		display: flex;
		align-items: center;
		justify-content: left;
		padding-left: 30rpx;
		left: 0rpx;
		border-top: 0.5rpx solid #b8b8b8;
		background-color: white;
	}

	.bi {
		margin: 0 40rpx 0 0;
	}
</style>
